<!-- route: / name: BaseQuestion-->
<template>
  <div class="baseQuestion">
    <!--  登录页  -->
    <ul v-if="path === 'login'" class="login">
      <li v-for="v in loginData" :key="v.childId">
        <el-link @click.prevent="goIndex(v.childId)" target="_blank" :underline="false">{{v.title}}</el-link>
      </li>
    </ul>
    <!--  首页  -->
    <ol v-else-if="path === 'index'" class="index">
      <li v-for="v in indexData" :key="v.childId">
        <el-link @click.prevent="goIndex(v.childId)" target="_blank" :underline="false">{{v.title}}</el-link>
        <i style="font-size: 14px; float: right" class="el-icon-arrow-right"></i>
      </li>
    </ol>
    <!--  全部企业  -->
    <ul v-else class="init">
      <li v-for="v in businessData" :key="v.childId">
        <el-link @click.prevent="goIndex(v.childId)" target="_blank" :underline="false">{{v.title}}</el-link>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: "BaseQuestion",
  props: {
    path: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      loginData: [
        {title: '如何创建账号？',childId: 9},
        {title: '个人如何实名认证？',childId: 10},
        {title: '如何认证企业？',childId: 14},
        {title: '如何更换绑定手机号？',childId: 22},
        {title: '如何发起合同？',childId: 11},
        {title: '如何签署合同？',childId: 12},
        {title: '如何进入企业控制台？',childId: 15},
      ],
      indexData: [
        {title: '1. 如何创建账号？',childId: 9},
        {title: '2. 个人如何实名认证？',childId: 10},
        {title: '3. 如何认证企业？',childId: 14},
        {title: '4. 如何发起合同？',childId: 11},
        {title: '5. 如何签署合同？',childId: 12},
        {title: '6. 如何购买签署套餐？',childId: 13},
        {title: '7. 如何进入企业控制台？',childId: 15},
        {title: '8. 如何创建企业印章？',childId: 20},
        {title: '9. 如何添加企业成员？',childId: 16},
        {title: '10. 如何更换绑定手机号？',childId: 22},
      ],
      businessData: [
        {title: '如何认证企业？',childId: 14},
        {title: '如何添加企业成员？',childId: 16},
        {title: '如何创建企业印章？',childId: 20},
      ]
    }
  },
  mounted() {},
  methods: {
    goIndex(id){
      open(`https://www.signzg.com/#/helpCenterInfo?serviceId=${id}`)
      // open(`http://192.168.10.28:8081/#/helpCenterInfo?serviceId=${id}`)
    }
  }
}
</script>

<style scoped lang="scss">
.baseQuestion{
  height: auto;
  box-sizing: border-box;
  .init > li {
    color: #606266;
    font-size: 14px;
    padding: 10px 0
  }
  .index, .login{
    border-top: 1px solid #f2f3f5;
    padding: 15px 0;
    margin-top: 20px;
  }
  .index > li::marker{
    display: inline-block;
  }
  .index > li , .login > li{
    color: #606266;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .login{
    padding: 20px 20px 0;
  }
  .login > li{
    list-style: disc;
    color: #ea0014;
  }
}
</style>